import channelList from './channel-list';
import stbList from './stb-list';
import deviceList from './device-list';
import ad from './ad-list'
import channelStatus from './channel-status'
import tenantStatus from './tenant-status'

const allpages = [deviceList, stbList, channelList, ad, channelStatus, tenantStatus];

export default new class {
    initialize() {
        this.pagesMap = allpages.reduce((pages, page) => {
            pages[page.name] = page;
            return pages;
        }, {});
        this.$tabs = $('#page-tabs');
        this.$body = $('#page-body');
        this.lastPageId = null;
        // 打开默认页
        let hash = location.hash.replace(/^#/, '');
        this.activePage('deviceList');
        allpages.forEach(page => {
            this.createTab(page.name);
        });
        // 如果用户有在地址栏输入页面，就打开对应页面（简单的路由）
        if(this.hasPage(hash)) {
            this.activePage(hash);
        } else {
            this.activePage('deviceList');
        }
    }
    hasPage(pageid){
        return !!this.pagesMap[pageid];
    }
    onPageChanged(callback){
        $(this).on('pagechange', callback);
    }
    createTab(pageid) {
        const page = this.pagesMap[pageid];
        if (!page) {
            throw new Error('页面不存在！');
        }
        let $tab = this.$tabs.find(`[page-id=${pageid}]`);
        // 创建标签
        if($tab.length === 0) {
            $tab = $(`<li>
            <a>${page.title}</a>
            </li>`);
            $tab.attr('page-id', pageid);
            this.$tabs.append($tab);
            // 标签页点击事件
            $tab.on('click', e => {
                this.activePage(pageid);
            });
        }
    }
    /**
     *
     * @param {string} pageid 菜单对应的页面ID
     * @param {any} [menudata]  菜单数据， 随便传
     */
    activePage(pageid, menudata) {
        const page = this.pagesMap[pageid];
        if (!page) {
            throw new Error('页面不存在！');
        }
        if(this.lastPageId === pageid) {
            return;
        }
        let $tab = this.$tabs.find(`[page-id=${pageid}]`);
        // 创建标签
        if($tab.length === 0) {
            this.createTab(pageid);
            $tab = this.$tabs.find(`[page-id=${pageid}]`);
        }
        // 关闭上一个页面
        if(this.lastPageId) {
            this.deactivePage(this.lastPageId);
        }
        // 渲染当前页面内容
        const element = $(`<div>${page.html}</div>`);

        // 显示前的回调
        if(typeof page.beforeMount === 'function') {
            page.beforeMount(element);
        }
        this.$body.append(element);
        // 设为激活
        $tab.addClass('active');
        // 显示后的回调
        if(typeof page.mounted === 'function') {
            page.mounted(element, menudata);
        }
        page.$element = element;
        // 修改浏览器地址
        location.hash = pageid;
        // 触发pagechange事件
        $(this).trigger('pagechange',[pageid, this.lastPageId]);
        // 记录pageid
        this.lastPageId = pageid;
    }
    deactivePage(pageid){
        const page = this.pagesMap[pageid];
        if(!page) {
            return;
        }
        this.$tabs.find(`[page-id=${pageid}]`).removeClass('active');
        this.$body.empty();
        if(typeof page.unmounted === 'function') {
            page.unmounted(page.$element);
        }
    }
}();
